<template>
	<div
		:class="[
			'app-editor-container',
			'app-mob-input__number-range',
			`app-mob-input-${name}`,
		]"
	>
		<van-field
			v-bind="$attrs"
			type="number"
			input-align="left"
			class="number-range__start"
			v-model="startNumber"
			:disabled="disabled"
			:readonly="readonly"
			:placeholder="startPlaceholder"
			@focus="handleFocus"
			@blur="handleBlur"
		>
		</van-field>
		<span class="number-range__concat">~</span>
		<van-field
			v-bind="$attrs"
			type="number"
			input-align="right"
			class="number-range__end"
			v-model="endNumber"
			:disabled="disabled || !startNumber"
			:readonly="readonly || !startNumber"
			:placeholder="endPlaceholder"
			@focus="handleFocus"
			@blur="handleBlur"
		>
		</van-field>
	</div>
</template>
<script lang="ts" setup>
import { IEvent, IParam } from '@/core';
import { numberRangeProps } from './number-range';
import { useEditorTypeParams } from '@/hooks/use-editor';
interface EditorEmit {
	(name: 'editor-event', value: IEvent<string>): void;
}
const props = defineProps(numberRangeProps);
const emit = defineEmits<EditorEmit>();
// 类型校验
const { validateConfig, valueSeparator } = useEditorTypeParams();
validateConfig();

const startName = computed(() => {
	if (props.valueItemNames) {
		return props.valueItemNames.split(',')[0];
	}
});
const endName = computed(() => {
	if (props.valueItemNames) {
		return props.valueItemNames.split(',')[1];
	}
});
const startNumber = ref();
const endNumber = ref();

watch(
	() => props.value,
	(newVal: any) => {
		if (newVal) {
			const items = newVal.split(valueSeparator);
			if (items.length === 2) {
				startNumber.value = items[0];
				endNumber.value = items[1];
			}
		}
	},
	{ immediate: true }
);

const handleFocus = (event: any)=> {
	if (
		startNumber.value &&
		endNumber.value &&
		Number(endNumber.value) <= Number(startNumber.value)
	) {
		endNumber.value = null;
		App.getNotificationHelper().warning(
			App.ts('common.numberrange.warn', '结束值需要大于起始值')
		);
	}
	const items = [startNumber.value, endNumber.value];
	emit('editor-event', {
		name: `${props.name}`,
		action: 'editorFocus',
		data: items.join(valueSeparator),
	});
}

const handleBlur = (event: any) => {
	if (
		startNumber.value &&
		endNumber.value &&
		Number(endNumber.value) <= Number(startNumber.value)
	) {
		endNumber.value = null;
		App.getNotificationHelper().warning(
			App.ts('common.numberrange.warn', '结束值需要大于起始值')
		);
	}
	const items = [startNumber.value, endNumber.value];
	emit('editor-event', {
		name: `${props.name}`,
		action: 'valueChange',
		data: items.join(valueSeparator),
	});
	emit('editor-event', {
		name: `${props.name}`,
		action: 'editorBlur',
		data: items.join(valueSeparator),
	});
	if (startName.value && startNumber.value) {
		emit('editor-event', {
			name: startName.value,
			action: 'valueChange',
			data: startNumber.value.toString(),
		});
	}
	if (endName.value && endNumber.value) {
		emit('editor-event', {
			name: endName.value,
			action: 'valueChange',
			data: endNumber.value.toString(),
		});
	}
};
</script>
